<template>
	<view class="content" :style="{'--color':color}" :class="{'p-bot300':pageData.length > 3 && status == 1}">
		<status-bar title='我的仓库' :back="back"></status-bar>


		<view class="row bgWhite j-sa">
			<view class="color_80 h6 p-top30 p-bot20 t-letter2" :class="{active:status == 1}" @click="switchTab(1)">
				待使用({{nums.un_use_num}})
			</view>

			<view class="color_80 h6 p-top30 p-bot20 t-letter2" :class="{active:status == 3}" @click="switchTab(3)">
				待发货({{nums.delivery_num}})
			</view>
			<view class="color_80 h6 p-top30 p-bot20 t-letter2" :class="{active:status == 4}" @click="switchTab(4)">待收货
			</view>
			<view class="color_80 h6 p-top30 p-bot20 t-letter2" :class="{active:status == 2}" @click="switchTab(2)">已使用
			</view>

		</view>


		<block v-for="(item,index) in pageData" :key="index">
			<view class="List" @click="toUrls(item.id)">
				<!-- slect_active -->
				<view class="slect_btn d-flex a-center j-centert f-shrink-0" v-if="ines"
					:class="{slect_active:ids.indexOf(item.id) != -1}">
					<view class="iconfont icon-xuanzhong size26"></view>
				</view>
				<view class="ConBox  p-re">

					<view class="row bot topList j-sb a-center">
						<view class="color_33 h6 bold" v-if="status == 1">购买时间：{{item.order_date}}</view>
						<view class="color_33 h6 bold" v-if="status == 3">申请时间：{{item.delivery.own_date}}</view>
						<view class="color_33 h6 bold" v-if="status == 4">发货时间：{{item.delivery.send_date}}</view>
						<view class="color_33 h6 bold" v-if="status == 2">
							收货时间：{{item.delivery.confirm_date?item.delivery.confirm_date:item.used_date}}</view>
						<text class="size26 bold t-letter2" :style="{color:color}" v-if="status == 1">待使用</text>
						<text class="size26 bold t-letter2" :style="{color:color}" v-if="status == 2">已使用</text>
						<text class="size26 bold t-letter2" :style="{color:color}" v-if="status == 3">待发货</text>
						<text class="size26 bold t-letter2" :style="{color:color}" v-if="status == 4">待收货</text>
					</view>

					<view class="listContetn">
						<view class="product_Img p-re f-shrink-0 f-gorw0">
							<image :src="$imgUrls(item.pdtimg)" mode="aspectFill" class="wh bor_radius_10"></image>
							<view class="h7 white numId p-top4 p-bot4 p-left14 p-right14">{{item.id}}</view>
						</view>
						<view class="d-flex f-column j-sb m-left20 f-gorw1">
							<view class="color_33 size30 ellipsis">{{item.pdtname}}</view>
							<view class="d-flex a-center" v-if="item.pdt_spec">
								<text class="color_99 h6 f-shrink-0">规格：</text>
								<text class="color_33 h6 bold ellipsis">{{item.pdt_spec}}</text>
							</view>
							<view class="row j-sb a-center">
								<view class="d-flex a-center ">
									<text class="color_99 h6">数量：</text>
									<text class="color_33 h6 bold">X{{item.pdt_num}}</text>
								</view>
								<text class="color_33 h6">{{item.buy_store_name}}</text>
							</view>

						</view>
					</view>

					<view class="Ordernum ">
						<text class="color_80 h6">商品单号：{{item.ordcode}}</text>
					</view>
					<view class="row j-end p-right20">
						<view class="confirm flexac" v-if="item.status == 4" @click="confirmBtn(item)">确认收货</view>
						<view class="confirm flexac" v-if="item.status == 4 || item.status == 2"
							@click="expressage(item)">查看物流</view>
					</view>

					<block v-if="item.shareState == 1">
						<view class="shareState p-re"></view>
						<view class="white size22 sharTxt">已分享</view>
					</block>
				</view>

			</view>
		</block>


		<block v-if="pageData.length">
			<view class="viewbtn fixedBtn bgcolor d-flex j-centert a-center white size36 bold t-letter2"
				@click="ines = true" v-if="status == 1 && ines == false">选择使用</view>
			<view class="viewbox auto fixedBtn d-flex j-sa" v-if="ines">
				<view class="bot_btn d-flex cancel j-centert a-center size36 color_80" @click="ines = false,ids = []">
					没有想好</view>
				<view class="bot_btn d-flex f-column  bgcolor j-centert a-center  white" @click="nowGive()">
					<text class="size36 bold">立即使用</text>
					<text class="h6" v-if="ids.length">已选择 ({{ids.length}})</text>
				</view>
			</view>
		</block>


		<empty v-if="!pageData.length" type='1' cat='3' msg='还没有相关数据哦~'></empty>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				imgUrl: this.imgUrl,

				ines: false,
				noData: true,
				page: 1,
				limit: 10,
				status: 1,
				pageData: [],
				ids: [], // 赠送的商品id
				statusNav: 1,
				nums: [],
			}
		},
		onLoad(e) {
			let that = this;
			if (e.status) {
				that.status = e.status;
				that.statusNav = 2;
			}
		},
		onShow() {
			let that = this;
			that.getGoodsList();
		},
		methods: {

			//  进入详情
			toUrls(id) {
				let that = this;
				if (that.ines && that.status == 1) { // 选择赠送
					if (that.ids.indexOf(id) == -1) {
						that.ids.push(id);
					} else {
						that.ids.splice(that.ids.indexOf(id), 1)
					}
				}
				if (!that.ines && that.status == 1) { // 进入详情页
					uni.navigateTo({
						url: 'houseDetails?id=' + id
					})
				}
			},
			//  获取多选商品赠送id
			// add_ids(id){
			// 	let that = this;
			// 	if(that.ids.indexOf(id) == -1){
			// 		that.ids.push(id);
			// 	}else{
			// 		that.ids.splice(that.ids.indexOf(id),1)
			// 	}
			// },
			//  立即赠送
			nowGive() {
				let that = this;
				if (that.ids.length > 0) {
					uni.navigateTo({
						url: 'houseDetails?ids=' + that.ids,
						success: () => {
							that.ines = false;
							that.ids = [];
						}
					})
				} else {
					uni.showToast({
						title: '未选中商品赠送~',
						icon: 'none'
					})
				}
			},
			switchTab(type) {
				let that = this;
				that.noData = true;
				that.status = type;
				that.pageData = [];
				that.page = 1;
				that.getGoodsList();
			},
			getGoodsList() {
				let that = this;
				uni.showLoading({
					title: '加载中~'
				})
				that.$http.post({
					url: '/singleSaleWarehouseApi/getMyWarehouseGoodsList',
					data: {
						status: that.status,
						page: that.page,
						limit: that.limit
					}
				}).then(res => {
					uni.hideLoading();
					if (res.errcode != '100') return this.$Toast(res.msg);
					const result = res.data || [];

					this.page == 1 ? this.pageData = result : this.pageData = this.pageData.concat(result);
					if (res.num) this.nums = res.num;
					if (result.length < this.limit) that.noData = false;

				})
			},

			confirmBtn(item) {
				let that = this;
				that.$Modal('提示', '确认收货吗？').then(res => {
					if (!res) return;
					that.$http.post({
						url: '/WaterApi/receiveGoods',
						data: {
							checkid: item.id
						}
					}).then(res2 => {
						if (res2.code != 200) return this.$Toast(res.msg);
						const Index = this.pageData.findIndex(n => n.id == item.id);
						this.pageData.splice(Index, 1)
					})
				})
			},
			expressage(item) {
				this.toUrl(`/orderPage/order/logistics?id=${item.id}&Stash=2`)
			}
		},
		computed: {
			...mapState(['color', 'vid', 'bid']),
		},
		onReachBottom() {
			let that = this;
			if (!that.noData) return;
			that.page++;
			that.getGoodsList();
		},
	}
</script>
<style lang="scss">
	page {
		background: #f7f9fa;
	}

	.List {
		width: 100%;

		margin: 20rpx auto 0 auto;
		// padding:0 20rpx 0 20rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;

	}

	.topList {
		padding: 20rpx;
	}

	.ConBox {
		width: 690rpx;
		margin-left: 30rpx;
		background-color: #FFFFFF;
	}

	.listContetn {
		width: 100%;
		padding: 0 20rpx;
		display: flex;
		margin-top: 20rpx;
	}

	.Ordernum {
		width: 100%;
		padding: 20rpx;

		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
	}

	.confirm {
		width: 140rpx;
		height: 54rpx;
		border-radius: 26rpx;
		border: 1rpx solid #ddd;
		// background-color: var(--color);
		color: #333;
		font-size: 22rpx;
		margin-bottom: 20rpx;
		margin-left: 20rpx;
	}

	.bot_btn {
		width: 310rpx;
		height: 100rpx;
		border-radius: 50rpx;
		-webkit-border-radius: 50rpx;
	}

	.fixedBtn {
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.icon-xuanzhong {
		color: #f7f9fa;
	}

	.rows {
		width: 100%;
		overflow: hidden;
	}

	.active {
		color: var(--color);
		font-size: 30rpx;
		font-weight: bold;
		border-bottom: 4rpx solid var(--color);
	}

	.slect_btn {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		-webkit-border-radius: 50%;
		border: 1rpx solid #999999;
		margin-left: 30rpx;
	}

	.slect_active {
		background: var(--color);
		border: 1rpx solid var(--color);

		.icon-xuanzhong {
			color: #FFFFFF !important;
		}
	}

	.product_Img {
		width: 140rpx;
		height: 140rpx;
	}

	.numId {
		position: absolute;
		right: 0;
		top: 0;
		background: var(--color);
		border-radius: 0 10rpx 0 10rpx;
	}

	.fixedBtn {
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.bot_btn {
		width: 310rpx;
		height: 100rpx;
		border-radius: 50rpx;
		-webkit-border-radius: 50rpx;
	}

	.cancel {
		background: #ededed;
	}

	.shareState {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 126rpx 182rpx 126rpx;
		border-color: transparent transparent var(--color) transparent;
		position: absolute;
		bottom: -25rpx;
		right: -150rpx;
		transform: rotate(10deg);
		-webkit-transform: rotate(10deg);
	}

	.sharTxt {
		position: absolute;
		bottom: 28rpx;
		right: 2rpx;
		transform: rotate(-45deg);
	}
</style>